<script>
export default {
  name: "MyAnimation",
  data() {
    return {
      isShow: true,
    }
  }
}
</script>

<template>
  <div>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <!--使用vue提供的transition过渡标签来动态应用动画 他会自己识别来和去所需要使用的class类 添加apper可以让一开始的时候就使用动画-->
    <transition name="myAnimation" appear>
      <h1 v-show="isShow">你好啊</h1>
      <!--他的原理其实就是在v-show得到true值的时候去加上进入的三个类：nam-enter-active,name-enter,name-enter-to,为false的时候反之-->
    </transition>
  </div>
</template>

<style scoped>
h1 {
  background-color: orange;
}

/*使用动画:当transition标签里的元素的v-show得到true值时，会自己加上去这个类*/
.myAnimation-enter-active {
  animation: yj 0.5s linear;
}

/*使用动画*/
.myAnimation-leave-active {
  animation: yj 0.5s linear reverse;
}

/*定义动画*/
@keyframes yj {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
</style>